<template>
  <div class="UserInfo">
    <!-- 1导航栏 -->
    <MMnavbar title="我的资料"></MMnavbar>
    <!-- 2内容栏 -->
    <div class="mainbox">
      <MMcell title="头像" value="续命咖啡" class="avatar">
        <template>
          <img class="avatarimg" src="@/assets/logo.png" alt="" />
        </template>
        <dialog></dialog>
      </MMcell>
      <van-cell-group>
        <MMcell title="昵称" :value="userInfo.nickname"></MMcell>
        <MMcell title="性别" :value="gender" @click="setgender"></MMcell>
        <!-- popup>picker
        title-----------标题
        show-toolbar----显示最上栏
        :columns--------数据来源
        @confirm--------确认事件
        @cancel---------取消事件
        ref ------------绑定调用组件方法
        default-index---选中项的索引
        -->
        <van-popup v-model="isShow1" position="bottom">
          <van-picker
            title="性别"
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="onCancel"
            :default-index="genderindex"
            @close="closegender"
            ref="gender"
          />
        </van-popup>
        <MMcell title="地区" :value="userArea" @click="setcity"></MMcell>
        <van-popup v-model="isShow2" position="bottom">
          <!-- <van-picker
            title="地区"----------------标题
            show-toolbar---------------最上面的显示栏
            columns="citydata"---------数据绑定
            @confirm="onConfirm"-------点击事件
            @cancel="onCancel"---------取消时间
          /> -->
          <van-area
            title="地区"
            :area-list="areaList"
            :columns-num="2"
            @confirm="Confirm"
            @cancel="Cancel"
          />
        </van-popup>
        <MMcell title="个人简介" :value="userInfo.intro"></MMcell>
      </van-cell-group>
    </div>
    <!-- 3按钮栏 -->
    <van-button size="large" type="default" @click="lockout"
      >退出登录</van-button
    >
  </div>
</template>

<script>
import { changedata } from '@/api/user.js'
import { mapState, mapGetters, mapMutations } from 'vuex'
import { deleteToken } from '@/utils/local.js'
// 导入城市数据
import arealist from '@/utils/area.js'
export default {
  name: 'userInfo',
  data () {
    return {
      columns: ['未知', '男', '女'],
      areaList: arealist,
      isShow1: false,
      isShow2: false
      // genderindex: 0
    }
  },
  computed: {
    // 获取用户信息
    ...mapState(['userInfo']),
    ...mapGetters(['userGender', 'userArea']),

    // 性别渲染--显示用户信息中对应的下标
    genderindex () {
      return this.userInfo.gender
    },

    // 将性别和数据绑定，键对值匹配
    gender () {
      const map = { 0: '未知', 1: '男', 2: '女' }
      return map[this.userInfo.gender]
    }
    // 地区渲染在store中完成
  },
  methods: {
    ...mapMutations(['SETUSERINFO', 'SETLOGIN', 'SETUSERSOME']),
    // 一关闭就更新pick组件，
    closegender () {
      // 调用自带事件,设置对应列选中项的索引
      this.$refs.gender.setColumnValue(0, this.genderindex)
    },
    onConfirm (value, index) {
      // value, index
      // 对应绑定的显示值和下标
      // 提示，关闭遮罩，
      this.$toast.loading({ duration: 0 })
      this.isShow1 = false
      // 请求
      changedata({ gender: index })
        .then(res => {
          window.console.log('res:', res)
          // 同步更新页面数据
          this.SETUSERSOME({ key: 'gender', value: res.data.gender })
          this.$toast('成功')
        })
        .catch(err => {
          window.console.log(err)
        })
    },

    onCancel () {
      // 还原原来的值
      this.$refs.gender.setColumnIndex(0, this.genderindex)
      this.isShow1 = false

      this.$toast('取消成功')
    },
    // 修改性别
    setgender () {
      this.isShow1 = true
    },
    // 修改地区
    setcity () {
      this.isShow2 = true
    },

    Confirm (columns) {
      // columns绑定的数据列表
      // 提示，关闭遮罩，
      this.$toast.loading({ duration: 0 })
      this.isShow2 = false
      // 请求---属性对应数据列表中的citylist
      changedata({ area: columns[1].code })
        .then(res => {
          window.console.log('res:', res)
          // 同步更新页面数据-----key对值，value对请求获取的code
          this.SETUSERSOME({ key: 'area', value: res.data.area })
          this.$toast('成功')
        })
        .catch(err => {
          window.console.log(err)
        })
    },
    Cancel () {
      this.isShow2 = false
    },
    // 退出登录
    lockout () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '确认退出吗'
        })
        .then(() => {
          // 提示
          this.$toast.success('退出成功')
          // 清理token,用户数据,修改登录状态，跳转
          this.SETUSERINFO('')
          this.SETLOGIN()
          deleteToken()
          this.$router.push('/Find')
        })
        .catch(() => {
          this.$toast.fail('退出失败')
        })
    }
  }
}
</script>

<style lang="less">
.UserInfo {
  width: 100%;
  .avatar {
    margin-bottom: 10px;
    border-radius: 8px;
    .avatarimg {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
  .van-cell-group {
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
  }
  .van-button {
    color: @main-color;
  }
}
</style>
